<template>
    <div class="data-ana">
      <div class="row">
        <div class="left content">
          <div class="title"><span>冷却水系统水压水温图</span></div>
          <!-- <div id="chart_1" class="echart"></div> -->
        </div>
        <div class="right content">
          <div class="title"><span>冷却水系统水压水温时间曲线</span></div>
          <div id="chart_1" class="echart"></div>
        </div>
      </div>
      <div class="row">
        <div class="left content">
          <div class="title"><span>冷冻水系统水压水温图</span></div>
        </div>
        <div class="right content">
          <div class="title"><span>左侧参数时间曲线</span></div>
        </div>
      </div>
      <div class="row">
        <div class="left content">
          <div class="title"><span>冷机及泵组的平衡性分析</span></div>
        </div>
        <div class="right content">
          <div class="title"><span>左侧参数时间曲线</span></div>
        </div>
      </div>
      <div class="row">
        <div class="left content">
          <div class="title"><span>冷塔的平衡性分析</span></div>
        </div>
        <div class="right content">
          <div class="title"><span>左侧参数时间曲线</span></div>
        </div>
      </div>
    </div>
</template>
<script>
export default {
  name: 'DataAna',
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      const chart = this.$echarts.init(document.getElementById('chart_1'))
      // 进行图表的绘制操作
      // ...
      const option = {
        legend: {
          data: [
            '冷却水泵进口冷却水温度',
            '冷水机组进口冷却水温度',
            '冷水机组出口冷却水温度',
            '冷却水过滤器进口压力',
            '冷却水泵进口压力',
            '冷却水止回阀进口压力',
            '冷却水冷水机组进口压力',
            '冷却水冷水机组出口压力'
          ],
          textStyle: {
            color: 'white' // 设置 legend 文字颜色为红色
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: 'white' // 设置纵坐标轴线颜色为红色
            },
            textStyle: {
              color: 'white' // 设置 legend 文字颜色为红色
            }
          },
          data: [
            '0:00',
            '1:00',
            '2:00',
            '3:00',
            '4:00',
            '5:00',
            '6:00',
            '7:00',
            '8:00',
            '9:00',
            '10:00',
            '11:00',
            '12:00',
            '13:00',
            '14:00',
            '15:00',
            '16:00',
            '17:00',
            '18:00',
            '19:00',
            '20:00',
            '21:00',
            '22:00',
            '23:00'
          ]
        },
        yAxis: [

          {
            type: 'value',
            name: '温度 (°C)',
            // min: 0,
            // max:32,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: 'white' // 设置纵坐标轴线颜色为红色
              },
              textStyle: {
                color: 'white' // 设置 legend 文字颜色为红色
              }
            }
          },
          {
            type: 'value',
            name: '压力 (mH2O)',
            // min: 0,
            // max:32,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: 'white' // 设置纵坐标轴线颜色为红色
              },
              textStyle: {
                color: 'white' // 设置 legend 文字颜色为红色
              }
            }
          }
        ],
        series: [
          {
            name: '冷却水泵进口冷却水温度',
            data: [
              31.31, 28.2, 30.03, 28.24, 30.79, 28.54, 30.67, 30.6, 32.09, 29.91,
              28.1, 30.59, 28.23, 31.78, 27.76, 30.1, 28.6, 30.78, 29.73, 30.6, 29.72,
              29.57, 30.53, 31.93
            ],
            type: 'line',
            yAxisIndex: 0
          },
          {
            name: '冷水机组进口冷却水温度',
            data: [
              32.56, 32.43, 32.5, 32.4, 32.49, 32.46, 32.43, 32.43, 32.34, 32.17,
              32.45, 32.15, 32.57, 32.5, 32.49, 32.56, 32.55, 32.25, 32.24, 32.39,
              32.57, 32.21, 32.57, 32.37
            ],
            type: 'line',
            yAxisIndex: 0
          },
          {
            name: '冷水机组出口冷却水温度',
            data: [
              36.86, 37.19, 36.98, 37.02, 36.82, 37.07, 36.81, 36.78, 37.19, 37.1,
              36.93, 37.23, 37.16, 37.01, 37.09, 37.06, 36.72, 37.14, 36.82, 36.96,
              37.04, 37.19, 37.1, 37.24
            ],
            type: 'line',
            yAxisIndex: 0
          },
          {
            name: '冷却水过滤器进口压力',
            data: [
              12.01, 12.0, 12.06, 11.91, 12.01, 11.94, 12.07, 12.04, 12.08, 12.09,
              12.04, 11.91, 11.93, 12.07, 11.98, 12.06, 12.06, 11.96, 12.02, 12.05,
              12.06, 11.96, 12.05, 11.96
            ],
            type: 'line',
            yAxisIndex: 1
          },
          {
            name: '冷却水泵进口压力',
            data: [10.00, 10.00, 10.00, 9.99, 10.01, 9.99, 10.00, 10.01, 10.00, 10.01, 10.01, 10.01, 9.99, 9.99, 9.99, 10.00, 9.99, 10.00, 10.01, 10.00, 10.00, 10.00, 10.00, 10.01],
            type: 'line',
            yAxisIndex: 1
          },
          {
            name: '冷却水止回阀进口压力',
            data: [38.01, 38.00, 38.00, 38.01, 38.00, 38.00, 38.01, 38.00, 37.99, 38.01, 38.01, 38.00, 38.00, 38.00, 38.00, 38.00, 38.00, 38.01, 38.00, 38.00, 37.99, 38.00, 37.99, 38.00],
            type: 'line',
            yAxisIndex: 1
          },
          {
            name: '冷却水冷水机组进口压力',
            data: [37.52, 37.51, 37.42, 37.42, 37.50, 37.49, 37.43, 37.45, 37.58, 37.59, 37.51, 37.52, 37.43, 37.45, 37.50, 37.58, 37.51, 37.56, 37.57, 37.50, 37.60, 37.57, 37.54, 37.47],
            type: 'line',
            yAxisIndex: 1
          },
          {
            name: '冷却水冷水机组出口压力',
            data: [32.54, 32.59, 32.57, 32.48, 32.50, 32.48, 32.51, 32.45, 32.56, 32.53, 32.57, 32.44, 32.54, 32.46, 32.40, 32.53, 32.52, 32.52, 32.55, 32.51, 32.47, 32.58, 32.46, 32.45],
            type: 'line',
            yAxisIndex: 1
          }
        ]
      }

      chart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.echart{
  width: 100%;
  height: 95%;
}
  .row{
    display: flex;
    height: 30rem;
    padding: 0.4rem;
    justify-content: space-between;
    .left{
      width: 33%;
      // background-color: pink;
    }
    .right{
      width: 66%;
      // background-color: beige;
    }
  }
</style>
